<template>
	<view class='my-order bg-active-color'>
		<Lines></Lines>
		<view class='order-header'>
			<view class='header-item' v-for='(item,index) in tabList' :key='index' :class=' tabIndex==index?"active":""  '
				@tap='changeTab(index)'>{{item.name}}</view>
		</view>

		<block v-for='(tabItem,tabI) in tabList' :key='tabI'>
			<view v-show='tabI===tabIndex'>
				<view v-if='tabItem.list.length > 0' class='order-main' :style="'height:'+clentHeight+'px;'">
					<!--商品-->
					<view v-for='(k,i) in tabItem.list' :key='i'>
						<view class='order-goods'>
							<view class='goods-status f-active-color'>{{ k.status }}</view>
							<view class='goods-item' v-for='(item,index) in orderList'>
								<OrderList :item='item' :index='index'></OrderList>
							</view>
						</view>
						<Lines></Lines>
						<!--总价-->
						<!-- <view class='total-price'>
							订单金额: <text class='f-active-color'>¥{{k.totalPrice}}</text> (包含运费¥0.00)
						</view>
						<Lines></Lines> -->
						<!--支付-->
						<!-- <view class='payment'>
							<view class='payment-text f-active-color'>支付</view>
						</view> -->
					</view>
				</view>

				<view v-else class='no-order' :style="'height:'+clentHeight+'px;'">
					<view>您还没有相关订单</view>
					<view class='no-order-home' @tap="goIndex">去首页逛逛</view>
				</view>

			</view>
		</block>
	</view>
</template>

<script setup>
	import {
		onReady
	} from "@dcloudio/uni-app"
	import {
		ref
	} from "vue"
	import Lines from '@/components/common/Line.vue'
	import OrderList from '@/components/order/order-list.vue'
	import $http from '@/common/api/request.js'
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		userorderStore
	} from '@/store/order.js'
	import {
		storeToRefs
	} from 'pinia'
	const orderStore = userorderStore()
	const {
		orderList,getOrderList
	} = storeToRefs(orderStore)
	// 高度
	const clentHeight = ref(0)
	//当前位置
	const tabIndex = ref(0)
	//顶部选项卡的数据
	const tabList = ref([{
			name: "全部",
			list: [{
				status: "待发货",
				totalPrice: '19.00',
				goods_item: [{
						imgUrl: "https://tuchuangs.com/imgs/2023/04/13/a3690a9fdcce0cb7.jpg",
						name: "2023年新式包包，太美了",
						attrs: "粉色",
						pprice: "19.00",
						num: "1"
					},
				]
			}]
		},
		{
			name: "待付款",
			list: []
		},
		{
			name: "待发货",
			list: [
				{
						imgUrl: "https://tuchuangs.com/imgs/2023/04/13/a3690a9fdcce0cb7.jpg",
						name: "2023年新式包包，太美了",
						attrs: "粉色",
						pprice: "19.00",
						num: "1"
					},
			]
		},
		{
			name: "待收货",
			list: []
		},
		{
			name: "待评价",
			list: []
		},
	])
	onShow(()=>{
		getData()
	})
	const goIndex = ()=>{
		uni.navigateTo({
			url:'/pages/index/index'
		})
	}
	const getData = ()=>{
		$http.request({
			url:"/selectOrder",
			method:"POST",
			header:{
				token:true
			}
		}).then((res)=>{
			orderStore.getOrderList(res)
		}).catch(()=>{
			uni.showToast({
				title:'请求失败',
				icon:'none'
			})
		})
	}
	onReady(() => {
		uni.getSystemInfo({
			success: (res) => {
				clentHeight.value = res.windowHeight
			}
		})
	})
	const changeTab = (index) => {
		tabIndex.value = index;
	}
</script>

<style scoped>
	.no-order {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #FFFFFF;
	}

	.no-order-home {
		padding: 6rpx 60rpx;
		border: 2rpx solid #49BDFB;
		color: #49BDFB;
		border-radius: 40rpx;
	}

	.order-header {
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 2rpx solid #F7F7F7;
	}

	.header-item {
		text-align: center;
		flex: 1;
		line-height: 120rpx;
	}

	.active {
		border-bottom: 4rpx solid #49BDFB;
	}


	.goods-status {
		display: flex;
		justify-content: flex-end;
		background-color: #FFFFFF;
		padding: 20rpx;
	}

	.total-price {
		display: flex;
		justify-content: flex-end;
		background-color: #FFFFFF;
		padding: 20rpx;
	}

	.payment {
		display: flex;
		justify-content: flex-end;
		background-color: #FFFFFF;
		padding: 20rpx;
	}

	.payment-text {
		border: 2rpx solid #49BDFB;
		padding: 6rpx 40rpx;
		border-radius: 30rpx;
	}
</style>